<template>
    <el-dialog ref="dialog" :title="title" :visible.sync="visible" :width="width" :top="top" :model="model" :modalAppendToBody="modalAppendToBody" :show-close="false"
             :fullscreen="fullscreen"  :closeOnClickModal = "closeOnClickModal" :destroyOnClose="destroyOnClose" @open="open" @close="close"
               append-to-body v-dialogDrag :class="{'fullscreen':fullscreen}">
      <div slot="title">
        <span style="font-size: 18px;">{{ title }}</span>
        <button type="button" class="el-dialog__headerbtn" aria-label="Fullscreen" style="right: 50px;" @click="handleFullscreen">
          <svg-icon icon-class="全屏" fill-color="#909399" style="height: 20px;width: 20px;"></svg-icon>
        </button>
        <button type="button" class="el-dialog__headerbtn" aria-label="Fullscreen" style="right: 20px;" @click="handleClose">
          <svg-icon icon-class="关闭" fill-color="#909399" style="height: 20px;width: 20px;"></svg-icon>
        </button>
      </div>
      <slot></slot>
      <template slot="footer">
        <slot name="footer"></slot>
      </template>
    </el-dialog>
</template>

<script>
export default {
  name: 'index',
  props:{
    title:{
      type: String,
      default: '标题'
    },
    visible:{
      type: Boolean,
      default: false
    },
    width:{
      type: String,
      default: '50%'
    },
    top:{
      type: String,
      default: '15vh'
    },
    model:{
      type: Boolean,
      default: true
    },
    modalAppendToBody:{
      type: Boolean,
      default: true
    },
    closeOnClickModal:{
      type: Boolean,
      default: false
    },
    destroyOnClose:{
      type: Boolean,
      default: false
    },
    open:{
      type: Function,
      default: function(){

      }
    },
    close:{
      type: Function,
      default: function(){

      }
    },
  },
  data(){
    return{
      fullscreen:false,
    }
  },
  methods:{
    handleClose(){
      this.$emit('update:visible', false)
    },
    handleFullscreen(){
      this.fullscreen = !this.fullscreen;
      debugger
      if(this.fullscreen){
        this.$refs.dialog.style.left = 0;
        this.$refs.dialog.style.top = 0;
      }
    }
  }
}
</script>

<style scoped>

</style>
